<template>
	<view class="page">
		<u-navbar title="修改密码" autoBack fixed placeholder titleStyle="color: #232832" bgColor="#FFFFFF"
			leftIconColor="#232832"></u-navbar>
		<c-content :top="statusBarHeight + 44" bgColor="#F4F4F7">
			<view class="title">
				设置新密码
			</view>
			<view class="form">
				<view class="form-item">
					<u-input :type="visible.pwd ? 'text' : 'password'" placeholder="请输入新密码" clearable maxlength="20" border="none"
						:suffixIconStyle="suffixStyle" color="#232832">
						<template #suffix>
							<view @click="visible.pwd = !visible.pwd">
								<u-icon :size="20" name="eye-fill" color="#232832" v-if="!visible.pwd"></u-icon>
								<u-icon :size="20" name="eye-off" color="#232832" v-else></u-icon>
							</view>
						</template>
					</u-input>
				</view>
				<view class="form-item">
					<u-input :type="visible.acpwd ? 'text' : 'password'" placeholder="请再次输入密码" clearable maxlength="20"
						border="none" :suffixIconStyle="suffixStyle" color="#232832">
						<template #suffix>
							<view @click="visible.acpwd = !visible.acpwd">
								<u-icon :size="20" name="eye-fill" color="#232832" v-if="!visible.acpwd"></u-icon>
								<u-icon :size="20" name="eye-off" color="#232832" v-else></u-icon>
							</view>
						</template>
					</u-input>
				</view>
			</view>
			<view class="btn">
				<view class="btn-label" @click="handleSubmit()">提交</view>
			</view>
		</c-content>
	</view>
</template>

<script>
	import mixins from '@/mixins/index.js'
	export default {
		mixins: [mixins],
		data() {
			return {
				visible: {
					pwd: false,
					acpwd: false
				}
			}
		},
		computed: {
			suffixStyle() {
				return {
					marginLeft: '6px'
				}
			}
		},
		methods: {
			handleSubmit() {

			}
		}
	}
</script>

<style scoped lang="scss">
	@include settingStyle;
</style>